<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${msg:upload.thumbnail.title}</title>
${css:weboo}
${css:eve}
${css:upload}
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/ihelpuoo.js}"></script>
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/String.js}"></script> 
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/util/detector.js}"></script> 
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/widget/GC.js}"></script> 
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/widget/Point.js}"></script> 
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/widget/Rect.js}"></script> 
<script language="JavaScript" src="${url:weboo:js/ihelpuoo/event/Event.js}"></script> 
<style rel="stylesheet" type="text/css">
.fieldName
{
text-align:right;
background-color:#F0F0F0;
font-weight:bold;
white-space:nowrap;
}

.icon8
{
cursor:pointer;
}

#arena
{
width:100%;
height:20px;
overflow-y:scroll;
overflow-x:auto;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#CCCC99;
scrollbar-darkshadow-color:#CCCC99;
scrollbar-face-color:#CCCC99;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF; 
scrollbar-3dlight-color:#CCCC99;
}

.nail
{
border:1px solid ${@borderColor};
cursor:pointer;
}

.activedNail
{
border:1px solid ${@hoverBorderColor};
cursor:pointer;
}
</style>
<script language="JavaScript">
var searcher = null;
var pager = null;
function initLayout()
{
	searcher = document.getElementById("searcher");
	pager = document.getElementById("pager");
	adjustLayout();
}

function adjustLayout()
{
	var arena = document.getElementById("arena");
	arena.style.height= document.body.clientHeight - searcher.offsetHeight - pager.offsetHeight;
}

function deleteOneThumbnail(id)
{
	if(confirm("${msg:upload.thumbnail.delete.confirm}"))
		sender.document.location = "${url:deleteFile.o}?ids="+id;
}

function showUploader()
{
	 hideEditor();
	var uploader = document.getElementById("uploader");
	uploader.style.display = "block";
	uploader.style.top = searcher.offsetHeight - 5;
	uploader.style.left = document.body.clientWidth - uploader.offsetWidth;
}

function onHideUploader()
{
	var uploader = document.getElementById("uploader");
	if(uploader.style.display!="none")
	{
		onSearch();
	}
}

function hideUploader()
{
	var uploader = document.getElementById("uploader");
	if(uploader.style.display!="none")
	{
		uploader.style.display = "none";
	}
}

function showEditor(obj)
{
	hideUploader();
	var editor = document.getElementById("editor");
	var rect = ihelpuoo.widget.GC.getRect(obj);
	editor.style.display = "block";
	ihelpuoo.widget.GC.moveToCentre(editor,document.body);
	document.FileEditor.elements[0].value = obj.getAttribute("ffid");
	document.FileEditor.elements[1].value = obj.getAttribute("fname");
	document.FileEditor.elements[2].value = obj.getAttribute("fdescription");
}

function saveFileInfo()
{
	document.FileEditor.submit();
}

function hideEditor()
{
	var editor = document.getElementById("editor");
	if(editor.style.display!="none")
	{
		editor.style.display = "none";
	}
}

window.onresize = function()
{
	adjustLayout();
}

function cancelEvent(args)
{
	ihelpuoo.event.cancelBubble(ihelpuoo.Event(args));
}

var callback = ${@callback};
var _activedImg = null;
function onClickThumbnail(obj)
{
	if(_activedImg)
		_activedImg.className = "nail";
	_activedImg = obj;
	obj.className = "activedNail";

	if(!callback || "function"!=(typeof callback))return;
	callback(obj.getAttribute("file-src"));
}
</script>
</head>
<body style="overflow:hidden;margin:0px;" onload="initLayout()" onclick="hideEditor();onHideUploader();">
<div id="uploader" style="position:absolute;display:none;border:1px solid #CCCC99;background-color:#FFFFFF;width:400px;height:300px;">
	<iframe src="${url:uploader.o}?types=[jpg]" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="editor" style="position:absolute;display:none;border:1px solid #CCCC99;background-color:#FFFFFF;width:400px;"
onclick="cancelEvent(arguments);">
	<form name="FileEditor" action="${url:updateFile.o}" method="POST" target="sender">
		<input type="hidden" name="id">
		<table border="0" cellspacing="1" cellpadding="2" width="100%">
			<tr>
				<td class="fieldName" width="20%">${msg:upload.file.name}</td>
				<td width="80%"><input name="name" type="text" value="" class="editarea"></td>
			</tr>
			<tr valign="top">
				<td class="fieldName">${msg:upload.file.description}</td>
				<td><textarea name="description" rows="4" class="editarea"></textarea></td>
			</tr>
			<tr>
				<td class="fieldName">&nbsp;</td>
				<td><a href="javascript:void(0)" onclick="saveFileInfo()">${msg:upload.file.save}</a></td>
			</tr>
		</table>
		<input type="hidden" name="callback" value="${@callback}">
	</form>
</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
	<tr height="20">
		<td style="border-bottom:1px solid #CCCC99;" bgcolor="#F0F0F0" id="searcher">
			<iframe name="sender" width="400" height="40" style="display:none"></iframe>
			<table width="100%" cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td>${searcher}</td>
					<td style="padding-right:20px;" align="right">
						<a href="javascript:void(0)" onclick="cancelEvent(arguments);showUploader();">${msg:upload.thumbnail.new}</a>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr valign="top">
		<td><div id="arena">${arena}</div></td>
	</tr>
	<tr height="20">
		<td style="border-top:1px solid #CCCC99;" id="pager">${pager}</td>
	</tr>
</table>
</body>
</html>